@import "../../../../../styles/variables";

:host {
  display: block;
}

.message {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: $gutter-half $gutter;
  width: 300px;
  background: $black-transparent;
  border: 1px solid transparent;
  border-left: 6px solid;
  border-left-color: adjust-color($color: $purple, $alpha: -0.1);

  &.even {
    background: adjust-color($black-transparent, $alpha: -0.2);
  }

  &.joined {
    border-top: 1px solid $lime;
    border-right: 1px solid $lime;
    border-bottom: 1px solid $lime;
  }

  &.incoming {
    border-left-color: adjust-color($color: $yellow, $alpha: -0.1);
  }

  &:hover,
  &.toggled {
    background: $black;
  }

  .dismiss {
    position: absolute;
    top: -8px;
    right: -8px;
    display: none;
    z-index: 1001;
  }

  &:hover {
    .dismiss {
      display: block;
    }
  }
}

.action {
  position: absolute;
  cursor: pointer;
  top: 75%;
  left: $gutter-half;
  transform: translateY(-50%);

  .mat-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    opacity: 0.6;

    &:hover {
      opacity: 1;
    }
  }
}

.poe-close {
  width: 22px;
  height: 22px;
  background-size: contain;
}

.content,
.actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.content {
  flex-direction: column;
}

.title {
  display: flex;
  color: $light-dark-grey;
  font-size: 12px;
}

.spacer {
  flex-grow: 1;
}

.actions {
  padding-top: $gutter-half;
}
